<template>
  <div class="tuijian-detail">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/selection' }">干部选任</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/selection/candidateReport' }">事前报告</el-breadcrumb-item>
    </el-breadcrumb>
    <section class="wboxnoborder">
      <div :style="'height:'+tableHeight+'px'">
        <el-scrollbar style="height: calc(100% + 16px);">
          <div v-show="loading">读取中...</div>
          <el-form v-show="!loading" ref="tuijianForm"
            :model="tuijianForm"
            label-width="160px"
            label-position="right"
            :inline="true" style="margin:15px;"
            validate-on-rule-change
            >
            <el-form-item label="动议岗位单位">
              {{unitName}}
            </el-form-item>
            <el-form-item label="动议岗位职务">
              {{jobName}}
            </el-form-item>
            <el-form-item label="动议岗位职级">
              {{jobLevel}}
            </el-form-item>
            <div style="clear:both"></div>
            <div v-show="!params.edit">
              <el-form-item label="原因" prop="reasonCode" :rules="[{ required: true, message: '请选择原因', trigger: 'blur' }]">
                <el-select placeholder="请选择" style="width:800px"
                  v-model="tuijianForm.reasonCode"
                  multiple
                  filterable
                  allow-create
                  default-first-option>
                  <el-option
                    v-for="(item,index) in confines"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <div style="clear:both"></div>
              <el-form-item label="具体内容描述">
                <el-input v-model="tuijianForm.description" style="width:800px" ></el-input>
              </el-form-item>
              <div style="clear:both"></div>
              <el-form-item label="上传附件" prop="file">
                <!-- files:{{this.files}}<br>fileList:{{this.fileList}} -->
                  <el-upload
                    class="upload-demo"
                    :action="this.$http.defaults.baseURL+this.$http.defaults.selectionAPI +'api/gen/file/upload/'"
                    :on-success="handleUploadSucc"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    :on-error='uploadError'
                    :multiple="true"
                    :file-list="fileList">
                    <el-button type="primary">点击上传</el-button>
                  </el-upload>
              </el-form-item>
            </div>
            <div v-show="params.edit">
              <el-form-item label="原因">
                <span class="selectioncontent">
                  {{tuijianForm.reasonCodeText}}
                </span>
              </el-form-item>
              <div style="clear:both"></div>
              <el-form-item label="具体内容描述">
                <el-input v-model="tuijianForm.description" style="width:800px" ></el-input>
              </el-form-item>
              <div style="clear:both"></div>
              <el-form-item label="附件" prop="files">
                <div v-for="(item, index) of tuijianForm.files" :key="index">
                  <a :href="$http.defaults.baseURL+$http.defaults.selectionAPI+'api/gen/file/download?id='+item.id">{{item.fileName}}.{{item.fileType}}</a>
                </div>
              </el-form-item>
            </div>
            <div style="clear:both"></div>
            <div v-if="inRoles(userRoles,'ROLE_chuzhang')">
              <el-form-item v-if="params.edit">
                <!-- <el-button type="primary" @click="onSubmit(1)" style="margin-left:120px;" :loading="submitloading">保存并重新发起流转</el-button> -->
                <el-button type="success" style="margin-left:160px;" @click="onSubmit(2)" :loading="submitloading">通过</el-button>
                <el-popconfirm title="确认进行此操作吗？" @confirm="onSubmit(3)" >
                  <el-button type="danger" :loading="submitloading" slot="reference">未通过，干部选任终止</el-button>
                </el-popconfirm>
              </el-form-item>
              <el-form-item v-else>
                <!-- <el-button @click="onSubmit(0)" style="margin-left:120px;" :loading="submitloading">暂存</el-button> -->
                <el-button type="primary" style="margin-left:160px;" @click="onSubmit(1)" :loading="submitloading">办理完成</el-button>
              </el-form-item>
            </div>
            <div v-if="inRoles(userRoles,'ROLE_banshirenyuan')">
              <el-form-item>
                <!-- <el-button @click="onSubmit(0)" style="margin-left:120px;" :loading="submitloading">暂存</el-button> -->
                <el-button type="primary" style="margin-left:160px;" @click="onSubmit(1)" :loading="submitloading">办理完成并发送处长</el-button>
              </el-form-item>
            </div>
          </el-form>
        </el-scrollbar>
      </div>
    </section>
  </div>
</template>

<script>
// import Qs from 'qs'
export default {
  name: 'candidateReport-detail',
  data () {
    return {
      confines: [],
      unitName: '',
      jobName: '',
      jobLevel: '',
      workgrouparr: [],
      userRoles: '',
      loading: false,
      submitloading: false,
      tableHeight: 100,
      params: {},
      tuijianForm: {
        company: '',
        zhiwu: '',
        zhiji: '',
        reasonCode: '',
        description: ''
      },
      recommendJson: {},
      files: [],
      fileList: []
    }
  },
  methods: {
    handleUploadSucc (response, file, fileList) {
      console.log('fileListaddnew:')
      console.log(fileList)
      if (response.success) {
        this.files.push(response.result[0])
        // this.fileList = fileList
        this.fileList = this.formatSuccList(fileList)
        this.$message({
          message: '上传成功！' + response.message,
          type: 'success'
        })
      } else {
        this.$message({
          message: '上传失败:' + response.message,
          type: 'error'
        })
      }
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleRemove (file, fileList) {
      console.log(file)
      let fid = file.id
      let url = this.$http.defaults.selectionAPI + 'api/gen/file/remove'
      this.$http.get(url, {
        params: {
          id: fid
        }
      }).then(res => {
        console.log('删除成功:', res)
        if (res.data.success === true) {
          let newfiles = []
          for (let i = 0; i < this.files.length; i++) {
            if (this.files[i].id !== fid) {
              newfiles.push(this.files[i])
            }
          }
          this.files = newfiles
          this.fileList = this.formatFiles(this.files)
          this.$message({
            message: '删除成功！',
            type: 'success'
          })
        }
      })
    },
    uploadError (err) {
      console.log(err)
      this.$message({
        message: '上传失败:' + err,
        type: 'error'
      })
    },
    onSubmit (req) {
      if (req === 1) {
        this.$refs['tuijianForm'].validate((valid) => {
          if (valid) {
            this.submitloading = false
            let reasonCode = ''
            for (let i = 0; i < this.tuijianForm.reasonCode.length; i++) {
              if (i === 0) {
                reasonCode += this.tuijianForm.reasonCode[i]
              } else {
                reasonCode += ',' + this.tuijianForm.reasonCode[i]
              }
            }
            let para = {
              busCandidatePersonId: this.params.personId,
              reasonCode: reasonCode,
              description: this.tuijianForm.description,
              stateCandidateReport: req,
              files: this.files.map(item => item.id)
            }
            this.postSubmit(para, req)
          }
        })
      } else {
        let para = {
          busCandidatePersonId: this.params.personId,
          description: this.tuijianForm.description,
          stateCandidateReport: req
        }
        this.postSubmit(para, req)
      }
    },
    postSubmit (para, req) {
      this.submitloading = true
      this.$http.post(this.$http.defaults.selectionAPI + 'api/selection/candidateReport/saveInfo', para).then(res => {
        if (res.data.success) {
          console.log('submit succ res :', res)
          if (req === 0) {
            this.$message({
              message: '暂存成功',
              type: 'success'
            })
          } else {
            if (this.inRoles(this.userRoles, 'ROLE_banshirenyuan')) {
              this.$message({
                message: '已办理完成并发送给干部处处长',
                type: 'success'
              })
            } else {
              this.$message({
                message: '保存成功',
                type: 'success'
              })
            }
          }
          this.submitloading = false
          if (this.inRoles(this.userRoles, 'ROLE_banshirenyuan')) {
            this.$router.push({
              name: 'candidateReportCn'
            })
          } else {
            if (this.params.edit) {
              this.$router.push({
                name: 'candidateReport',
                params: {
                  step: 3
                }
              })
            } else {
              this.$router.push({
                name: 'candidateReport',
                params: {
                  step: 1
                }
              })
            }
          }
        } else {
          this.$message({
            message: '保存失败:' + res.data.message,
            type: 'error'
          })
          this.submitloading = false
        }
      })
    },
    inRoles (roles, str) {
      console.log(str)
      // arr = 'aaabbROLE_admin'
      if (roles.indexOf(str) === -1) {
        return false
      } else {
        return true
      }
    },
    formatFiles (files) {
      if (files && files.length > 0) {
        let newfiles = []
        for (let i = 0; i < files.length; i++) {
          newfiles.push({name: files[i].fileName + '.' + files[i].fileType, id: files[i].id})
        }
        console.log(newfiles)
        return newfiles
      }
    },
    formatSuccList (fileList) {
      if (fileList && fileList.length > 0) {
        let newfiles = []
        for (let i = 0; i < fileList.length; i++) {
          if (fileList[i].response) {
            newfiles.push({name: fileList[i].response.result[0].fileName + '.' + fileList[i].response.result[0].fileType, id: fileList[i].response.result[0].id})
          } else {
            newfiles.push(fileList[i])
          }
        }
        console.log(newfiles)
        return newfiles
      }
    },
    getData (id) {
      this.loading = true
      let url = this.$http.defaults.selectionAPI + 'api/selection/candidateReport/getInfo'
      console.log('id:' + id)
      this.$http.get(url, {
        params: {
          personId: id
        }
      }).then(res => {
        this.loading = false
        console.log(res)
        if (res.data.success === true) {
          let rs = res.data.result
          this.unitName = this.params.unitName
          this.jobName = this.params.jobName
          this.jobLevel = this.params.jobLevel
          this.tuijianForm = rs

          if (rs.files) {
            this.files = rs.files
            this.fileList = this.formatFiles(this.files)
          } else {
            this.files = []
            this.fileList = []
          }
        }
      })
    },
    getConfines () {
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/sysDict/getByCode?code=16`)
        .then(response => {
          if (response.data.success) {
            this.confines = response.data.result
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    tableresize (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      obj.$nextTick(function () {
        obj.tableHeight = clientHeight - 165
      })
    }
  },
  mounted () {
    this.getConfines()
    this.userRoles = JSON.parse(localStorage.getItem('Roles'))
    this.params = this.$route.params
    console.log(this.params)
    this.unitName = this.params.unitName
    this.jobName = this.params.jobName
    this.jobLevel = this.params.jobLevel
    // if (this.params.edit) { 无论是否编辑状态，都尝试读取该人选推荐环节数据，有数据回显
    if (this.params.busCandidatePersonId) {
      this.params.personId = this.params.busCandidatePersonId
    }
    this.getData(this.params.personId)
    // }
    this.tableresize(this)
    let _this = this
    window.onresize = function windowResize () {
      // 通过捕获系统的onresize事件触发我们需要执行的事件
      _this.tableresize(_this)
    }
  }
}
</script>

<style>
.tuijian-detail fieldset{
  margin:20px;
}
.tuijian-detail .wboxnoborder .el-table{
  border: #95B8E7 solid 1px;
}
.tuijian-detail .wboxnoborder .el-table th{
  font-weight: normal;
  background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
  text-align: center;
  border-right: #95B8E7 solid 1px;
  border-bottom: #95B8E7 solid 1px;
  min-height: 30px;
  line-height:30px;
}
.tuijian-detail .wboxnoborder .el-table td, .el-table th{
  padding:0;
  font-size:var(--size14) !important;
  line-height: 20px;
  font-family: '宋体';
  text-align: center;
}
.tuijian-detail .el-table__row{
  height: 50px;
}
.tuijian-detail .el-form--inline .el-form-item__content{
  font-weight: bolder
}
.tuijian-detail .el-tag.el-tag--info {
  color:#000
}
.tuijian-detail .el-tag,.tuijian-detail  .el-progress-bar__innerText {
  font-size:var(--size16) !important;
}
</style>
<style scoped>
.sel-tit {
  height: 32px;
  line-height: 32px;
  padding: 0 8px;
  float: left;
  color: #303133;
  text-align: center;
  font-size: 16px;
}
.sel-con {
  width: 100%;
  height: 32px;
  line-height: 32px;
  padding: 0 8px;
  box-sizing: border-box;
  float: left;
  color: #909399;
  border-bottom: 0.5px solid #909399;
  font-size: 14px;
}
.tuijian .cell i {
  width: 30px;
  height: 30px;
  background-position: center center;
  background-repeat: no-repeat;
  float: center;
  display: block;
  margin: 0 auto;
}
.workflowmsg ul{
  background:#F5F7FA;
  margin:0 20px 20px;
  padding:10px 0;
}
.workflowmsg li{
  padding:0;
  list-style: none;
  margin-left:20px;
  line-height: 200%;
  font-size:var(--size) !important;
}
h1{
  font-size:var(--size16) !important;
  font-weight: bolder;
  height: 30px;
  border-bottom: 1px solid #95B8E7;
  font-family: '宋体';
  line-height: 30px;
  color: #000;
  padding-left:10px;
  background-image: linear-gradient(to bottom , #EEF4FF, #E0ECFF);
  margin:0;
}
h3{
  font-size:var(--size16) !important;
  font-weight: bolder;
  padding-left: 20px;
}
.el-pagination{
  float: left;
  padding:7px 10px;
}
.wboxs{
  padding:5px 15px;
  width: calc(100% - 30px);
  background: #fff;
  border: 1px solid #95B8E7;
  margin:0 10px;
  overflow: hidden;
}
.tuijian-detail .wboxnoborder{
  padding:0;
  width: 100%;
  background: #fff;
  margin:0 10px;
  overflow: hidden;
}
</style>
